<template>
  <div id="chart" style="width: 500px;height: 400px"></div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import {inject, onMounted} from "vue";
const axios = inject('$axios')

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);
const porps = defineProps(['grade',])
onMounted(() => {
  var chartDom = document.getElementById('chart');
   var myChart = echarts.init(chartDom);
  var option;
  axios.get("code?grade="+porps.grade).then(res => {
    var tem = res.data.data
    option = {
      title: {
        text: '租赁码饼形图',
        subtext: '使用情况',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '状态',
          type: 'pie',
          radius: '50%',
          data: tem,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    myChart.setOption(option);

  }).catch(err => {

  })

})
</script>

<style scoped>

</style>